<script lang="ts" setup>
import type {
  ElForm,
  FormItemContext,
  UploadFile,
  UploadFiles,
  UploadProps,
  UploadRawFile,
  UploadRequestOptions,
  UploadUserFile,
} from "element-plus";
import { getCategory } from "@/api";
import { useTokenStore } from "@/store";
import useUpload from "@/hooks/useUpload";
const file = ref<UploadRawFile>();
const store = useTokenStore();
const handleExceed: UploadProps["onExceed"] = (
  files: File[],
  uploadFiles: UploadUserFile[],
) => {
  console.log(files, uploadFiles);
  ElMessage.error("只能上传一项");
};
const handleUpload: UploadProps["beforeUpload"] = (file: UploadRawFile) => {
  const regexType = /^image\/([A-Za-z])+$/;
  if (regexType.test(file.type)) {
    console.log("成功");
    console.log(file);
    return true;
  } else {
    console.log("失败");
    ElMessage({
      showClose: true,
      message: "请上传图片类型",
      type: "error",
    });
    return false;
  }
};
interface Category {
  cid: number;
  classification: string;
  createTime: string;
}
const refForm = shallowRef<typeof ElForm | null>(null);
const form = ref<{ cids: number[] }>({
  cids: [],
});
const category = ref<Category[]>([]);
const resetForm = () => {
  console.log(refForm.value);
  refForm.value!.resetFields();
  form.value = { cids: [] };
};
const onSubmit = async () => {
  try {
    const flag = await useUpload(file.value!, "/upload", form.value.cids);
    if (flag) {
      ElMessage({
        message: "成功了",
        type: "success",
      });
    } else {
      ElMessage({
        message: h(
          "p",
          { style: "line-height: 1; font-size: 14px" },
          "您未成功完成表单项,请先完成",
        ),
      });
    }
  } catch (e) {
    ElMessage({
      message: h(
        "p",
        { style: "line-height: 1; font-size: 14px" },
        "您未成功完成表单项,请先完成",
      ),
    });
  }
};
const httpRequest = (option: UploadRequestOptions) => {
  console.log(option);
  return new Promise((resolve, reject) => {
    if (form.value.cids) {
      file.value = option.file;
      resolve("成功");
    } else {
      ElMessage({
        message: h(
          "p",
          { style: "line-height: 1; font-size: 14px" },
          "请选择标签",
        ),
      });
      reject("操作失败");
    }
  });
};
onMounted(async () => {
  const categoryInfo = await getCategory();
  if (categoryInfo.data) {
    categoryInfo.data.forEach((c: Category) => {
      category.value.push(c);
    });
  }
});
</script>
<template>
  <div
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    "
  >
    <el-form
      :model="form"
      label-width="auto"
      style="max-width: 600px"
      ref="refForm"
      @submit.prevent="() => {}"
    >
      <el-form-item label="请选择你要上传图片的类别">
        <el-select v-model="form.cids" multiple>
          <el-option
            :label="c.classification"
            :value="c.cid"
            v-for="c in category"
            :key="c.cid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="请选择上传图片">
        <el-upload
          class="upload-demo"
          list-type="picture"
          :limit="1"
          drag
          :auto-upload="true"
          :on-exceed="handleExceed"
          :before-upload="handleUpload"
          :infinite="true"
          name="file"
          :http-request="httpRequest"
        >
          <el-button type="primary">Click to upload</el-button>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped></style>
